<!--
 * @Author: zhang gen yuan
 * @Date: 2021-09-16 17:08:16
 * @Descripttion: 
-->
<template>
  <div class="login-box">
    <el-form
      :model="data.ruleForm"
      status-icon
      :rules="data.rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="uname">
        <el-input v-model="data.ruleForm.uname"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="upwd">
        <el-input type="password" v-model="data.ruleForm.upwd"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button class="btn" type="primary" @click="submitForm"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref, unref } from "vue-demi";
import { loginUtil } from "./util";
import { useStore } from 'vuex'
import { useRouter,useRoute } from 'vue-router'
let router = useRouter();
let route = useRoute();
let store = useStore();
let { data } = loginUtil();
let ruleForm = ref(null);
let submitForm = (val) => {
  console.log(ruleForm.value)
  ruleForm.value.validate((valid) => {
    if (valid) {
        store.commit('user/setUserInfo',{token:"这是个token"})
        // store.dispatch('permission/generateRoutes')
        router.push('/')
    } else {
      console.log("error submit!!");
      return false;
    }
  });
};
</script>

<style lang="scss" scoped>
.login-box {
  width: 500px;
  height: 400px;
  position: absolute;
  left: 50%;
  top: 100px;
  transform: translateX(-50%);
  .btn {
    width: 100%;
  }
}
</style>